<template lang="html">
      <div class="shang">
      	<div @click="goback()" class="goback">
     		<img src="../../static/img/houtui.png" /><span style="margin-top: 4%;">返回</span><p style="margin-left:25%;margin-top:4%;font-size: .4rem;display: inline-block;">商品</p>
     	</div>
     	<div class="mui-slider">
     		<div class="mui-slider-group mui-slider-loop">
     			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="#"><img src="../../static/img/bao1.jpg" /></a>
			</div>
			<div class="mui-slider-item">
				<a href="#"><img src="../../static/img/bao1.jpg" /></a>
			</div>
			<div class="mui-slider-item">
				<a href="#"><img src="../../static/img/bao2.jpg" /></a>
			</div>
			<div class="mui-slider-item">
				<a href="#"><img src="../../static/img/bao3.jpg" /></a>
			</div>
			<!--支持循环，需要重复图片节点-->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="#"><img src="../../static/img/bao3.jpg" /></a>
			</div>
     	</div>
     </div>
     <span class="price"><b>￥ 18,889</b></span>
     <p><span class="title1">{{result.brandName}}</span><span class="title2">女士、牛皮、红色CHAIN LOUISE 单肩包（可斜挎）M94686</span></p>
     <div class="main_t">
	     <p>大陆货源 &nbsp;&nbsp; 2-4天内发货</p>
	     <p>此商品为特例品，不支持使用优惠券且不参与会员折扣</p>

     </div>
     <div class="list">
     	<ul>
	     	<li><a>分期付款</a><p class="lie">0首付12期免息，开通领礼券&nbsp;&nbsp;></p></li>
	     	<li><a>到店自提</a><p class="lie">查看店铺地址&nbsp;&nbsp;></p></li>
	     	<li><a>微信管家</a><p class="lie">点击复制管家微信号&nbsp;&nbsp;></p></li>
	     </ul>
	     <dl v-for="item in result.serviceList">
	     	<dt><img :src="item.icon"></dt>
	     	<dd>{{ item.name }}</dd>
	     </dl>
     </div>
     <div class="detail">
     	<h3>商品信息</h3>
     	<div v-for="item in results">
     		<div class="detail1">{{ item.name }}</div>
     		<div class="detail2">{{ item.value }}</div>
     	</div>
     </div>
     <div class="ping">
     	<h3>用户评价</h3><span>综合评分5.0&nbsp;&nbsp;></span>
     </div>
     <div class="xiangqings" >
     	<h3>商品详情</h3>
     	<div v-for="item in result.productInfo">
     		<p v-for="items in item" v-if="items.type == 1">{{ items.info }}</p>
     		<p v-for="items in item" v-if="items.type == 0" class="last"><img :src="items.info"></p>
     	</div>
     </div>
     <div class="foot" >
     	<h3>养护常识</h3>
     	<div v-for="item in result.maintainInfo">
     		<p v-for="items in item" v-html="items.info"></p>
     	</div>
     </div>
     <div class="bootom">
     	<div @click="getData()">加入购物车</div>
     	<div @click="getNext()">立即购买</div>
     </div>			
    </div>
</template>

<script>
import Bus from '../route/bus'
let count = 0;
export default {
	data(){
		return{
			result:{},
			results:{},
			arr:[]
		}
	},
	methods:{
		goback(){
			history.back()
		},
		getData(){
			count++;
			console.log(count);	
			this.arr=this.result.productInfo.attrList
			this.arr=this.result.productInfo
			let pagetwo_a=this.arr.priceInfo.nowPrice;
			let pagetwo_b=this.arr.title;
			let pagetwo_c=this.arr.imgList[0];
			console.log(this.arr)
			Bus.$emit('getTarget', this.arr); 
			this.$message('添加购物车成功')
		},
		getNext:function(){
			this.$router.push({path:"../../car"})
		}
	},
	mounted() {
		var gallery = mui('.mui-slider');
		gallery.slider({
			interval:0 //自动轮播周期，若为0则不自动播放，默认为0；
		});
	},
	created(){
		this.axios.get("../static/data/first3.json").then(data =>{
			this.result= data.data;
			this.results=data.data.productInfo.attrList;
		})
	}
}
</script>

<style lang="css" scoped>
	.goback>img{
		margin-left: 5%;
		margin-top:4%;
		width: 6%;
		vertical-align: top;
	}
	.mui-slider img{
		height: 5.3rem;
	}
	.shang{
		width: 100%;
		height:83rem;
		background:white;
	}
	.shang .price{
		color: red;
		font-size: .5rem;
		padding-left: 3%;
	}
	.shang .title1{
		color:#CDB994;
		font-weight: bold;
		font-size: .3rem;
	}
	.shang>p{
		padding-left: 5%;
		margin-top: .3rem;
	}
	.shang .title2{
		color:black;
		font-size: .3rem;
	}
	.main_t{
		margin-top:.7rem;
		padding-left:5%;

		border-bottom: .02rem solid gainsboro;
	}
	.main_t>p{
		margin-bottom: 5%;
		margin-top:-.2rem;
		color: black;
	}
	.list ul li{
		list-style: none;
		border-bottom: .03rem solid gainsboro;
		height: 1rem;
		line-height: 1rem;
	}
	a{
		text-decoration: none;
		color: black;
	}
	.list a{
		padding-left: 3%;
		font-weight: bold;
		float: left;
	}
	.list ul li p{
		display:block;
		font-size: .25rem;
		color: black;
	}
	.list .lie{
		text-align: right;
		padding-right: 2%;
	}
	.list>dl{
		display: inline-block;
		width: 25%;
		text-align: center;
		padding:.5rem 0;
		background: #FAFAFA;
	}
	.list dl dt img{
		width: 25%;
	}
	.detail{
		padding-bottom: .3rem;
		border-bottom: .02rem solid gainsboro;
	}
	.detail>h3{
		padding: .3rem 4%;
	}
	.detail1{
		width: 25%;
		display: inline-block;
		height: .6rem;
		padding-left: 4%;
		font-size: .27rem;
		line-height: .6rem;
	}
	.detail2{
		width: 70%;
		float: right;
		display: inline-block;
		text-align: left;
		padding-right: 2%;
		height: .5rem;
		line-height: .65rem;
		font-size: .27rem;
	}
	.ping{
		height: 1.5rem;
		border-bottom: .02rem solid gainsboro;

	}
	.ping h3{
		display: inline-block;
		line-height: 1.4rem;
		margin-left: 4%;
		color: grey;
	}
	.ping span{
		margin-left: 30%;
	}
	.xiangqings{
		border-bottom: .02rem solid gainsboro;
		padding-bottom: .3rem;
		height: 47rem;
	}
	.xiangqings>div .last{
		width:90%;
		margin:0 auto;
	}
	.xiangqings>div p img{
		width: 100%;
		margin:0 auto;
	}
	.xiangqings>h3,.foot>h3{
		color: grey;
		margin:.3rem 4%;
	}
	.xiangqings>div p:first-child{
		color: black;
		font-size: .25rem;
		margin:0 4%;
	}
	.foot{
		height: 8.5rem;
	}
	.foot>div p{
		color: black;
		font-size: .25rem;
		margin:0 4%;
	}
	.bootom{
		width: 100%;
		position: fixed;
		bottom: 1rem;
	}
	.bootom>div{
		width: 50%;
		height: .7rem;
		color: white;
		display:inline-block;
		text-align: center;
		line-height: .7rem;
		font-size: .35rem;
	}
	.bootom>div:first-child{
		background: black;
	}
	.bootom>div:last-child{
		background: red;
		margin-left: -1.5%;
	}
</style>
